<template>
    <el-dialog title="项目信息" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
        <!-- <el-tabs v-model="activeName"> -->
            <!-- <el-tab-pane label="项目信息" name="first"> -->
                <div class="listItem">
                    <div class="list">
                        <div class="item"><label>名称：</label><span>{{ dataForm.name }}</span></div>
                    </div>
                    <div class="list">
                        <div class="item"><label>承运单位：</label><span>{{ dataForm.carrier }}</span></div>
                    </div>
                    <div class="list">
                        <div class="item"><label>收货单位：</label><span>{{ dataForm.consignee }}</span></div>
                    </div>
                    <div class="list">
                        <div class="item"><label>收货方地址：</label><span>{{ dataForm.consigneeAddress }}</span></div>
                    </div>
                    <div class="list">
                        <div class="item"><label>收货方联系人及电话：</label><span>{{ dataForm.consigneePhone }}</span></div>
                    </div>
                    <div class="list">
                        <div class="item"><label>托运单位：</label><span>{{ dataForm.shipper }}</span></div>
                    </div>
                    <div class="list">
                        <div class="item"><label>托运方联系电话：</label><span>{{ dataForm.shipperPhone }}</span></div>
                    </div>
                    <div class="list">
                        <div class="item"><label>司机信息：</label></div>
                        <el-table :data="projectDrivers" style="width: 80%">
                            <el-table-column prop="driverName" label="司机姓名">
                            </el-table-column>
                            <el-table-column prop="driverPhone" label="司机联系电话">
                            </el-table-column>
                            <el-table-column prop="licenseNumber" label="车牌号">
                            </el-table-column>
                            <el-table-column prop="licenseNumber" label="下载" width="50">
                                <template slot-scope="scope">
                                    <i class="el-icon-download" style="font-size: 18px;cursor: pointer;"
                                        @click="downloadDriver(scope.row.id)"></i>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            <!-- </el-tab-pane> -->
            <!-- <el-tab-pane label="现场评价" name="second">
                <div class="listItem listItemtow" v-if="evaluateState">
                    <div class="list">
                        <div class="item">
                            <div>您对我公司服务人员的服务态度是否满意?</div>
                            <div>
                                <el-radio-group v-model="form.evaluate1">
                                    <el-radio :label="1" :disabled="form.evaluate1 != 1">非常满意</el-radio>
                                    <el-radio :label="2" :disabled="form.evaluate1 != 2">满意</el-radio>
                                    <el-radio :label="3" :disabled="form.evaluate1 != 3">一般</el-radio>
                                    <el-radio :label="4" :disabled="form.evaluate1 != 4">不满意</el-radio>
                                    <el-radio :label="5" :disabled="form.evaluate1 != 5">非常不满意</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                    <div class="list">
                        <div class="item">
                            <div>您对我公司服务人员的技术水平是否满意?</div>
                            <div>
                                <el-radio-group v-model="form.evaluate2">
                                    <el-radio :label="1" :disabled="form.evaluate2 != 1">非常满意</el-radio>
                                    <el-radio :label="2" :disabled="form.evaluate2 != 2">满意</el-radio>
                                    <el-radio :label="3" :disabled="form.evaluate2 != 3">一般</el-radio>
                                    <el-radio :label="4" :disabled="form.evaluate2 != 4">不满意</el-radio>
                                    <el-radio :label="5" :disabled="form.evaluate2 != 5">非常不满意</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                    <div class="list">
                        <div class="item">
                            <div>您对我公司产品运行情况是否满意?</div>
                            <div>
                                <el-radio-group v-model="form.evaluate3">
                                    <el-radio :label="1" :disabled="form.evaluate3 != 1">非常满意</el-radio>
                                    <el-radio :label="2" :disabled="form.evaluate3 != 2">满意</el-radio>
                                    <el-radio :label="3" :disabled="form.evaluate3 != 3">一般</el-radio>
                                    <el-radio :label="4" :disabled="form.evaluate3 != 4">不满意</el-radio>
                                    <el-radio :label="5" :disabled="form.evaluate3 != 5">非常不满意</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                    <div class="list">
                        <div class="item">
                            <div>您对我公司产品质量是否满意?</div>
                            <div>
                                <el-radio-group v-model="form.evaluate4">
                                    <el-radio :label="1" :disabled="form.evaluate4 != 1">非常满意</el-radio>
                                    <el-radio :label="2" :disabled="form.evaluate4 != 2">满意</el-radio>
                                    <el-radio :label="3" :disabled="form.evaluate4 != 3">一般</el-radio>
                                    <el-radio :label="4" :disabled="form.evaluate4 != 4">不满意</el-radio>
                                    <el-radio :label="5" :disabled="form.evaluate4 != 5">非常不满意</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                    <div class="list">
                        <div class="item">
                            <div>您认为本公司的服务需要改进的地方:</div>
                            <div
                                style="border: 1px solid #ccc;min-height: 100px;border-radius: 10px;padding: 5px 28px !important;">
                                {{ form.suggestion }}</div>
                        </div>
                    </div>
                </div>
                <div v-if="!evaluateState" style="text-align: center;color: #999;">暂未评价</div>
            </el-tab-pane> -->
        <!-- </el-tabs> -->

        <template #footer>
            <span class="dialog-footer">
                <el-button size="small" @click="dialogFormVisible = false">关 闭</el-button>
                <!-- <el-button size="small" type="primary" @click="dataFormSubmit()" :disabled="isDisabled">确 定</el-button> -->
            </span>
        </template>
    </el-dialog>
</template>
    
<script>
import { v4 as uuidv4 } from "uuid";
import { getToken } from "@/utils/auth";
export default {
    emits: ["refreshDataList"],
    data() {
        return {
            dialogFormVisible: false,
            isDisabled: false,
            dataForm: {
                id: 0,
                name: '',//名称
                carrier: '',//承运单位
                consignee: '',//收货单位
                consigneeAddress: '',//收货方地址
                consigneePhone: '',//收货方联系人及电话
                shipper: '',//托运单位
                shipperPhone: '',//托运方联系电话
            },
            form: {
                evaluate1: '',
                evaluate2: '',
                evaluate3: '',
                evaluate4: '',
                suggestion: '',
            },
            evaluateState: '',
            activeName: 'first',
            projectDrivers: [],
            url: process.env.VUE_APP_BASE_API,
            headers: {
                token: getToken() //从cookie里获取token，并赋值  Authorization ，而不是token
            },
            dataRule: {
                // driverName: [
                //   { required: true, message: '司机姓名必填' },
                // ],
                // driverPhone: [
                //   { required: true, message: '司机联系电话必填' },
                // ],
                // licenseNumber: [
                //   { required: true, message: '车牌号必须填写' },
                // ]
            },
            formLabelWidth: "140px",
        };
    },
    created() { },
    methods: {
        async init(id, evaluateState) {
            this.dataForm.id = id || 0
            this.evaluateState = evaluateState
            this.dialogFormVisible = true;
            this.$nextTick(async () => {
                // this.$refs["dataForm"].resetFields();
                this.form.evaluate1 = ''
                this.form.evaluate2 = ''
                this.form.evaluate3 = ''
                this.form.evaluate4 = ''
                this.form.suggestion = ''
                this.fileList = []
                this.projectList = []
                this.driverList = []
                await this.Sevice({
                    url: "/project/list",
                    method: "get",
                }).then(async (res) => {
                    if (res.code != 200) {
                    } else {
                        this.projectList = res.list
                    }
                });
                if (!this.dataForm.id) {
                    // 新增
                    // this.treeListTreeSetCurrentNode()
                } else {
                    //获取详情
                    this.Sevice({
                        url: "/project/info/" + this.dataForm.id,
                        method: "get",
                    }).then(async (res) => {
                        // console.log(res);
                        if (res.code != 200) {
                            // this.$message.error(res.data.msg)
                        } else {
                            this.dataForm.id = res.info.id;
                            this.dataForm.name = res.info.name;
                            this.dataForm.carrier = res.info.carrier;
                            this.dataForm.consignee = res.info.consignee;
                            this.dataForm.consigneeAddress = res.info.consigneeAddress;
                            this.dataForm.consigneePhone = res.info.consigneePhone;
                            this.dataForm.shipper = res.info.shipper;
                            this.dataForm.shipperPhone = res.info.shipperPhone;
                            this.projectDrivers = res.info.projectDrivers
                        }
                    });
                }
                // if (this.evaluateState) {
                //     this.Sevice({
                //         url: "/project/evaluate/info/" + this.dataForm.id,
                //         method: "get",
                //     }).then(async (res) => {
                //         console.log(res);
                //         if (res.code != 200) {
                //             // this.$message.error(res.data.msg)
                //         } else {
                //             this.form.evaluate1 = res.info.evaluate1;
                //             this.form.evaluate2 = res.info.evaluate2;
                //             this.form.evaluate3 = res.info.evaluate3;
                //             this.form.evaluate4 = res.info.evaluate4;
                //             this.form.suggestion = res.info.suggestion;

                //         }
                //     });
                // }
            })

        },
        downloadDriver(id) {
            this.Sevice({
                url: '/project/print/' + id,
                method: "post",
                headers: { "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" },
                responseType: 'blob',
                // withCredentials: false,
            }).then((response) => {
                console.log(response);
                let blob = new Blob([response.data], { type: "application/x-msdownload" });
                const fileName =
                    decodeURI(response.headers["content-disposition"].split("=")[1]);
                let objectUrl = URL.createObjectURL(blob); // 创建URL
                const link = document.createElement("a");
                link.href = objectUrl;
                // link.download = '.xlsx'// 自定义文件名
                //这里是获取后台传过来的文件名
                link.setAttribute("download", fileName);
                link.click(); // 下载文件
                URL.revokeObjectURL(objectUrl); // 释放内存
            })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 表单提交
        async dataFormSubmit() {

        },
    },
};
</script>
    
<style scoped>
.mod-menu .menu-list__input>.el-input__inner,
.mod-menu .icon-list__input>.el-input__inner {
    cursor: pointer;
}

.mod-menu__icon-popover {
    width: 458px;
    overflow: hidden;
}

.mod-menu__icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
}

.mod-menu__icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
}

.mod-menu__icon-list>.el-button {
    padding: 8px;
    margin: 8px 0 0 8px;
}

.mod-menu__icon-list>.el-button>span {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.mod-menu .icon-list__tips {
    font-size: 18px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
}

.el-tree {
    height: 200px;
    overflow-y: auto;
}

.item {
    display: flex;
    padding: 5px 0;
}

.listItemtow .item {
    display: block;
}

.item label {
    margin-right: 10px;
    min-width: 145px;
}

.item span {
    width: calc(100% - 145px);
    /* padding: 5px 0; */
    line-height: 26px;

    /* border-bottom: 1px solid #ccc; */
}

.items div {
    padding-left: 10px;
    line-height: 26px;
}

.list label {
    /* padding: 5px 0; */
    line-height: 26px;
    color: #999;
}

.list {
    /* border-bottom: 1px solid #ccc; */
}

.listItem {
    /* box-shadow: 0px 0px 3px #ccc;
    padding: 10px; */
    font-family: dengxian;
}

.texareastyle {
    text-indent: 28px;
    padding: 5px 28px !important;
    border: 1px solid #ccc;
    min-height: 100px;
    border-radius: 10px;
}</style>
    